<template>
  <el-dialog :visible.sync="dialogVisible" width="500px" title="选择归档文件夹" center :close-on-click-modal="false" :close-on-press-escape	='false'>
    <el-form ref="ruleForm" label-width="100px" style="margin-top: 30px">
      <el-form-item label="归档文件夹">
        <el-cascader placeholder="移动到" size="small"
                     class="input" v-model="typeIdWeb" expand-trigger="click"
                     props.checkStrictly=true
                     change-on-select
                     :options="treeOptions" :props="defaultProps"
        ></el-cascader>
      </el-form-item>
    </el-form>
    <!-- 底部按钮-->
    <div slot="footer" class="dialog-footer" align="right">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="submit" size="mini">确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {queryFolder} from "@/api/mail/admin/mail-doc"

    export default {
        name: "DocDialog",
        data() {
            return {
                dialogVisible: false,
                treeOptions: [],
                typeIdWeb: [],
                defaultProps: {
                    children: 'children',
                    label: 'text',
                    value: 'id'
                },
            }
        },
        mounted() {
            this.getFolder();
        },
        methods: {
            init() {
                if (this.treeOptions.length == 0) {
                    this.$confirm('您还尚未创建归档文件夹，立即去创建?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: "success"
                    }).then(() => {
                        this.$store.commit('SET_CURRENTSETFRAG', 'third')
                        this.$router.push('/mail/administration')
                    }).catch(() => {
                    });
                } else {
                    this.dialogVisible = true;
                }
            },
            submit() {
                this.$emit('dealFoldID', this.typeIdWeb[this.typeIdWeb.length - 1]);
                this.dialogVisible = false;
            },
            getFolder() {
                queryFolder().then(res => {
                    this.treeOptions = res.data.data;
                });
            },
        }
    }
</script>

<style scoped>

</style>
